<nz-modal [(nzVisible)]="isVisible" nzTitle="修改密码" [nzMaskClosable]="false" [nzFooter]="modalFooter"
  (nzOnCancel)="handleCancel()">
  <form nz-form [formGroup]="validateForm" #form>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="oldPassword" nzRequired>原密码</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input nz-input type="password" formControlName="oldPassword" name="oldPassword" />
        <nz-form-explain
          *ngIf="validateForm.get('oldPassword').dirty && validateForm.get('oldPassword').hasError('required')">
          请输入你的原密码！
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="newPassword" nzRequired>新密码</nz-form-label>
      <div>
        <nz-form-control [nzSpan]="12" [nzValidateStatus]="
            validateForm.get('newPassword').dirty &&
            (level < 2 ||
              validateForm.get('newPassword').hasError('required') ||
              validateForm.get('newPassword').hasError('minlength'))
              ? 'error'
              : ''
          ">
          <input nz-input type="password" formControlName="newPassword" name="newPassword"
            (ngModelChange)="validateConfirmPassword()" />
          <app-password-strength [password]="validateForm.get('newPassword').value" [(level)]="level">
          </app-password-strength>
          <nz-form-explain *ngIf="validateForm.get('newPassword').dirty">
            <ng-container *ngIf="
                validateForm.get('newPassword').hasError('required') ||
                validateForm.get('newPassword').hasError('minlength')
              ">
              请输入你的新密码且至少8个字符!
            </ng-container>
            <ng-container *ngIf="level < 2">
              密码强度过低!
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </div>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="confirmPassword" nzRequired>确认密码</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input nz-input type="password" formControlName="confirmPassword" name="confirmPassword" />
        <nz-form-explain
          *ngIf="validateForm.get('confirmPassword').dirty && validateForm.get('confirmPassword').errors">
          <ng-container *ngIf="validateForm.get('confirmPassword').hasError('required')">
            请输入你的确认密码!
          </ng-container>
          <ng-container *ngIf="validateForm.get('confirmPassword').hasError('confirmPassword')">
            密码不一致!
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button nzType="primary" type="submit" (click)="submitForm(validateForm.value)"
      [disabled]="level < 2 || !validateForm.valid">
      确定
    </button>
  </ng-template>
</nz-modal>
